{% extends 'base.html' %}

{% block title %}{{ title }} - 数据可视化{% endblock %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block breadcrumb_active %}{{ breadcrumb_active }}{% endblock %}

{% block content %}
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- 图表水平布局 -->
            <div class="row">
                <!-- 二手房房屋户型占比情况 -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">二手房房屋户型占比情况</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="regionChart" style="min-height: 200px; height: 250px; max-height: 300px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 重庆二手房户型及面积分布区间柱状图 -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">重庆二手房户型及面积分布区间</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="areaRangeChart" style="min-height: 200px; height: 250px; max-height: 300px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block extra_js %}
<script>
    // 1. 二手房房屋户型占比情况 - 饼图
    var regionCtx = document.getElementById('regionChart').getContext('2d');
    var houseTypeChart = new Chart(regionCtx, {
        type: 'pie',
        data: {
            labels: ['3室2厅', '2室2厅', '3室1厅', '4室2厅', '2室1厅', '其他'],
            datasets: [{
                data: [42.5, 28.3, 15.7, 8.2, 3.8, 1.5],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(153, 102, 255, 0.8)',
                    'rgba(255, 159, 64, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: '二手房房屋户型占比情况',
                    font: {
                        size: 16
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            var label = context.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed !== null) {
                                label += context.parsed + '%';
                            }
                            return label;
                        }
                    }
                }
            }
        }
    });

    // 2. 重庆二手房户型及面积分布区间柱状图
    var areaRangeCtx = document.getElementById('areaRangeChart').getContext('2d');
    var areaRangeChart = new Chart(areaRangeCtx, {
        type: 'bar',
        data: {
            labels: ['小户型(0-60)', '中小户型(60-90)', '中户型(90-140)', '大户型(>140)'],
            datasets: [{
                label: '数量',
                data: [1250, 2870, 3240, 1890],
                backgroundColor: 'rgba(153, 102, 255, 0.7)',
                borderColor: 'rgba(153, 102, 255, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '重庆二手房户型及面积分布区间柱状图',
                    font: {
                        size: 16
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed !== null) {
                                label += context.parsed.y + ' 套';
                            }
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '数量（套）'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '户型及对应面积'
                    }
                }
            }
        }
    });
</script>
{% endblock %}